<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    width: 500px;
    background-color: skyblue;
  }
  .table {
    background-color: pink;
    float: left;
  }
  .form {
    background-color: yellowgreen;
    float: right;
  }

  .clearfix,
  .clearfix::after,
  .clearfix::before {
    clear: both;
  }
</style>
<body>


  <div id="app">
    <div class="box clearfix">

    <!-- 
    需求:
    1. 列表信息（查->渲染） v-for :key
    2. 增、 删 、改（量力而行） v-on 绑定事件
    3. 业务：分数统计表 、 总分 、 平均分  computed
    -->

    <div class="table">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item , index) in list" :key="item.id">
            <td>{{index + 1}}</td>
            <td>{{item.subject}}</td>
            <td>{{item.score}}</td>
            <td>
              <a href="#" @click.prevent="del(item.id)">删除</a>
              | 
              <a href="#" @click.prevent="edit(item.id)">编辑</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr><td colspan="4">总分：{{totalScore}} 平均分：{{averageScore}}</td></tr>
        </tfoot>
      </table>
    </div>

    <!-- 增加 -->

    <div class="form">
      <div class="form-item">
        <div>科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入成绩" v-model.trim="subject">
        </div>
      </div>

      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" v-model.number="score">
        </div>
      </div>
    
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button v-if="flag" class="submit" @click="submit">添加</button>
          <button v-else class="submit" @click="subEdit">编辑</button>
        </div>
      </div>

      <div class="form-item">
        <div class="label">教务</div>
        <div class="input">
          <input type="text" placeholder="修改总分" v-model="newScore">
          <button @click="changeTotalScore" >坚持修改</button>
        </div>
      </div>
  </div>
  </div>
  </div>
</body>
  <script src="./js/vue2.6.12.js"></script>

  <script>

    var app = new Vue({
      el:'#app',
      data:{
        list:[
          {
            id:1,
            subject:'语文',
            score:62
          },
          {
            id:2,
            subject:'数学',
            score:89
          },
          {
            id:3,
            subject:'英语',
            score:70
          }
        ],
        subject:'',
        score:0,
        newScore:0,
        flag :true,
        editId:-1,
        sum:0

      },
      methods:{
        submit(){

          this.list.unshift({
            id:+new Date(),
            subject:this.subject,
            score:this.score
          })

          this.subject = ''
          this.score = 0
        },
        del(delId){
          // filter
          this.list = this.list.filter( item => item.id !== delId )
        },
        changeTotalScore(){
          this.totalScore = this.newScore
        },
        edit(editId){
          
          this.flag = false
          // 回显
          this.list.forEach(v => {
              // console.log('v:',v);
              if(v.id == editId){
                this.subject = v.subject
                this.score = v.score
              }
          });

          // 记录一下 id
          this.editId = editId 
        },
        subEdit(){
          // 编辑保存
          // 保存新数据
          // console.log(123456);

          this.list.forEach(v => {
              if(v.id == this.editId){
                v.subject = this.subject
                v.score = this.score
              }
          });
          this.score = 0
          this.subject = ''
          this.flag = true

        }
      },
      computed:{
        // totalScore(){
        //   return this.list.reduce((sum,item) => sum + item.score,0)
        // },

        totalScore:{
          get(){
            //  this.sum 代替原有的 sum结果
            //  第三方变量, 就是手动干预总分用的
            return this.sum ? this.sum : this.list.reduce((sum,item) => sum + item.score,0)
          },
          set(val){
            // ~~
            this.sum = val
          }
        },
        averageScore(){
          return (this.totalScore / this.list.length).toFixed(2)
        }
      }
    })

    

  </script>
</body>
</html>